<template>
    <div id="half" class="half">
        <div>
            <img
                class="info-alert"
                :src="this.defaultConfig.windowVideo"
            />
            <div class="close-btn">   
                <img
                    class="close-btn-img"
                    @click="onClickClose"
                    :src="this.defaultConfig.windowClose"
                />
            </div>
            <div class="info">
                <div class="info-title">{{title}}</div>
                <div class="info-text">{{text}}</div>
                <div >
                    <div class="info-videotitle">{{videotitle}}</div>
                    <img
                        @click="onClickLink(null,videoid,null)"
                        v-if="videoJumpTag === 'true' && !this.isYspApp()" 
                        class="info-video"
                        :src="videovocer"
                    />
                    <Player
                        v-else-if="videoConfig && videoConfig.vid"
                        class="video"
                        :config="videoConfig"
                        @stateChange="onStateChange"
                        ref="video"
                    />
                    <img
                        @click="onClickLink(null,videoid,null)"
                        class="txtCoverBg-video"
                        :src="this.defaultConfig.txtCoverBg"
                    />
                </div>
                
            </div>
            <img
                v-if="videoJumpTag === 'true' && !this.isYspApp()" 
                @click="onClickLink(null,videoid,null)"
                class="playBtn-video"
                :src="this.defaultConfig.playBtn"
            />
            <img
                @click="onClickLink(null,videoid,null)"
                class="videoMore-video"
                :src="this.defaultConfig.videoMore"
            />
        </div>
    </div>
</template>

<script>
import axios from "axios";
import $getImgUrl from 'lv/Util/getImgUrl';
import { EventBus } from "../utils/EventBus.js";
import Player from "../../node_modules/@tencent/cctvh5-ui/packages/LiveMedia"

export default {
    name: "Alert",
    components:{
        Player
    },
    data() {
        return {
            isHot: true,
            isUp: true,
            text:"",
            title:"",
            videoid:"",
            videotitle:"",
            videotype:"",
            videovocer:"",
            callback: undefined,
            nowFish:"",
            currentDeep:"",
            videoIcon: true,
            videoJumpTag: sessionStorage.getItem("YspVideoJumpTag") || "true",
            videoConfig:{
                "vid":"",
                "poster":""
            }
        };
    },
    methods: {
        onStateChange(state) {
            console.info('state Change', state);
            if(parseInt(state) === 1){
                //播放中
                EventBus.$emit("isVideoPlayAndPauseBgMusic", true)
            }
            if(parseInt(state) === 2){
                //暂停
            }
            if(parseInt(state) === 3){
                //播放完毕
            }
        },
        isYspApp(){
            if(navigator.userAgent.indexOf('yangshipin') >= 0){
                return true
            }
            return false
        },
        onClickClose() {
            let height = parseFloat(
                window.getComputedStyle(document.getElementById("half")).height
            );
            if (this.callback) this.callback();
            let that = this;
            this.tweenMove("half", 0, height, 200, function () {
                that.deleteHalf();
            });
        },
        onClickLink(pid, vid, url) {
            if(navigator.userAgent.indexOf("yangshipin") >= 0){
                this.clickLink(pid, vid, url);
            }else{
                this.videoJumpTag = "false"
                sessionStorage.setItem("YspVideoJumpTag", "false")
                let href = "https://m.yangshipin.cn/static/x/iframe/deepDiving/index.html#/game";
                let tempParam =
                "deepAction=normal&currentDeep="+this.currentDeep+"&YspDistance=" +
                parseInt(localStorage.getItem("YspDistance")) +
                "&YspFinishHonor=" +
                parseInt(localStorage.getItem("YspFinishHonor")) +
                "&nowFish="+this.nowFish +
                "&YspFishNum=" +
                parseInt(localStorage.getItem("YspFishNum")) ;
                if (href.indexOf("?") === -1) {
                    href = href + "?" + tempParam;
                } else {
                    href = href + "&" + tempParam;
                }
                this.callApp(null,null,href);
            }
            
        },
        onClickHalfUp() {
            this.isUp = false;
            let that = this;
            this.tweenHeight("half", 50, 90, 200, function () {
                that.createHalfBg();
            });
            this.tweenHeight("half-hot", 79, 90, 200);
        },
        onClickHalfDown() {
            this.isUp = true;
            this.deleteHalfBg();
            this.tweenHeight("half", 90, 70, 200);
            this.tweenHeight("half-hot", 90, 84, 200);
        },
        getImg(url, size) {
            url = url || '';
            url = url.replace(/\?[^?]+/, '');
            size = size * document.documentElement.clientWidth / 375;
            const imgUrl = $getImgUrl({
                url,
                type: [ 'jpg'],
                size
            });
            return imgUrl;
        },
    },
    async created(){
        let url = "https://h5access.yangshipin.cn/web/detail_share?vappid=59306155&vsecret=b42702bf7309a179d102f3d51b1add2fda0bc7ada64cb801&raw=1&vid=" + this.videoid;
        await axios.get(url).then((res) => {
            let temp = this.getImg(res.data.data.cover_pic,1000);
            this.videovocer = temp;
            this.videoConfig.vid = res.data.data.vid
            this.videoConfig.poster = temp
        })
    },
    mounted() {
        let that = this;
        setTimeout(() => {
            let height = parseFloat(
                window.getComputedStyle(document.getElementById("half")).height
            );
            that.tweenMove("half", 0, -height, 200);
        }, 200);
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .info-alert{
        width:100%;
        height: 450px;
        margin-top: 50px;
    }
    .close-btn{
        position: absolute;
        right: 12px;
        top: 62px;
    }
    .close-btn-img{
        width: 48px;
    }
    .info{
        position: absolute;
        top:90px;
        margin: 5px 25px;
        
    }
    .info-title{
        color: #F0D532;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0px;
    }
    .info-text{
        height: 140px;
        font-size: 14px;
        letter-spacing: 1px;
        color: #fff;
        margin-bottom: 5px;
        text-indent:2em;
    }
    .info-videotitle{
        color:#fff;
        position: absolute;
        z-index: 999;
        margin-left: 15px;
        margin-top: 3px;
    }
    .info-video{
        position: relative;
        width: 100%;
        height: 176px;
        min-height: 150px;
        max-height: 180px;
        border-radius: 15px;
    }
    .txtCoverBg-video{
        position: absolute;
        width: 100%;
        left: 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .playBtn-video{
        position: relative;
        left: 30px;
        bottom: 80px;
        width: 30px;
        height: 30px;
    }
    .videoMore-video{
        position: relative;
        float: right;
        right: 5px;
        width: 100px;
        top: -28px;
        right: 20px;
    }
    .half {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        bottom: -100%;
        z-index: 9999;
        font-family: PingFangSC-Medium, PingFang SC;
        background:#000;
    }
</style>

